import React, {useEffect, useState} from 'react'
import type {ColumnsType} from 'antd/es/table'
import {
	message,
	Cascader,
	TreeSelect,
	Modal,
	Form,
	Upload,
	Button,
	Input,
} from 'antd'
import moment from 'moment'
import SearchForm from '@/components/SearchForm'
import {getOperatelogList} from '@/service/common'
import CustomTable from '@/components/Table'
import {getPublicDownloadUrl} from '@/service/common/upload'

interface DataType {
	supplierCode: string
	supplierName: string
	orgId: string
	serviceType: string
	contacts: string
	status: string
	date: string
	disableFileUrl: string
}
const formItemLayout = {
	labelCol: {flex: '70px'},
	wrapperCol: {flex: '1'},
}
const fieldNames = {
	label: 'name',
	value: 'id',
	id: 'id',
	pId: 'parentId',
}
type propsType = {
	dataSource: any
	supplierTypeData: supplierAPI.supplierType
	companyData: any
	contactPhone: any
}
const settlement = (props: propsType) => {
	const {dataSource, supplierTypeData, companyData, contactPhone} = props
	const [form] = Form.useForm()
	const [dataList, setDataList] = useState([])
	const [searchData, setSearchData] = useState({})
	const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
	const [loading, setLoading] = useState<boolean>(false)
	const [total, setTotal] = useState()
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})
	/** 获取操作记录列表 */
	const getData = () => {
		setLoading(true)
		getOperatelogList({
			...params,
			...searchData,
			businessType: 24,
			businessId: dataSource?.id,
		})
			.then((res: any) => {
				if (res?.success) {
					const newData = res?.data?.records?.map((item: any) => {
						const data = JSON.parse(item?.logRemark)
						return {
							logTime: item?.logTime,
							logPersonname: item?.logPersonname,
							disableFileUrl: data?.disableFileUrl,
							disableReason: data?.disableReason,
							status: data?.status,
							supplierCode: dataSource?.supplierCode,
							supplierName: dataSource?.supplierName,
							orgId: dataSource?.orgId,
							supplierType: dataSource?.supplierType,
							contactPhone,
						}
					})

					setDataList(newData)
					setTotal(res?.data?.total)
					setLoading(false)
				} else {
					setLoading(false)
				}
			})
			.catch((err) => {
				setDataList([])
				message.error(err)
				setLoading(false)
			})
	}
	useEffect(() => {
		getData()
	}, [params])
	const columns: ColumnsType<DataType> = [
		{
			title: '供应商编号',
			dataIndex: 'supplierCode',
			align: 'center',
			width: 120,
		},
		{
			title: '供应商名称',
			dataIndex: 'supplierName',
			align: 'center',
			width: 160,
		},
		{
			title: '供应商所属公司',
			dataIndex: 'orgId',
			align: 'center',
			width: 160,
			render: (text) => (
				<>
					{text ? (
						<TreeSelect
							value={text?.split(',') || []}
							disabled
							multiple
							maxTagCount={3}
							maxTagPlaceholder="..."
							dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
							treeDefaultExpandAll
							fieldNames={fieldNames}
							treeDataSimpleMode
							treeData={companyData}
						/>
					) : (
						'-'
					)}
				</>
			),
		},
		{
			title: '供应商类型',
			dataIndex: 'supplierType',
			align: 'center',
			width: 120,
			render: (text) => (
				<Cascader
					disabled
					value={text?.split(',')}
					options={supplierTypeData}
				/>
			),
		},
		{
			title: '供应商联系人/电话',
			dataIndex: 'contactPhone',
			align: 'center',
			width: 180,
		},
		{
			title: '供应商状态',
			width: 120,
			dataIndex: 'status',
			align: 'center',
			render: () => '禁用',
		},
		{
			title: '禁用日期',
			dataIndex: 'logTime',
			width: 160,
			align: 'center',
		},
		{
			title: '操作',
			key: 'action',
			align: 'center',
			width: 100,
			fixed: 'right',
			render: (_: any, record: any) => (
				<Button
					type="link"
					onClick={() => {
						const url = record?.disableFileUrl?.split(',')
						if (url?.length) {
							getPublicDownloadUrl(url)
								.then((result: any) => {
									if (result?.success) {
										const urlData = result?.data?.map(
											(item: {
												id: number
												filename: any
												url: any
											}) => ({
												uid: item?.id,
												name: item?.filename,
												url: item?.url,
											}),
										)
										setIsModalOpen(true)
										form.setFieldsValue({
											...record,
											disableFileUrl: urlData,
										})
									}
								})
								.catch((err: any) => {
									message.error(err)
								})
						}
					}}>
					详情
				</Button>
			),
		},
	]
	const formItems: any[] = [
		{
			type: 'group',
			key: 'group1',
			groupItems: [
				{
					type: 'dateRange',
					label: '禁用时间',
					name: 'logTime',
					key: 'logTime',
				},
				{},
				{},
			],
		},
	]
	const onFinish = (values: any) => {
		const newValue = {...values}
		const searchDatas = {
			...newValue,
			startTime: newValue?.logTime
				? moment(newValue?.logTime?.[0]).format('YYYY-MM-DD 00:00:00')
				: '',
			endTime: newValue?.logTime
				? moment(newValue?.logTime?.[1]).format('YYYY-MM-DD 23:59:59')
				: '',
		}
		delete searchDatas.logTime
		setSearchData(searchDatas)
		setParams({
			current: 1,
			size: 10,
		})
	}
	const onReset = () => {
		setSearchData({})
		setParams({
			current: 1,
			size: 10,
		})
	}

	const normFile = (e: any) => {
		if (Array.isArray(e)) {
			return e
		}
		return e?.fileList
	}

	return (
		<div>
			<SearchForm
				onFinish={onFinish}
				onReset={onReset}
				formItems={formItems}
				formLayout={formItemLayout}
				style={{marginBottom: '12px'}}
			/>
			<CustomTable
				params={params}
				columns={columns}
				total={total}
				pagination
				callback={(pagination: any) => {
					setParams(pagination)
				}}
				loading={loading}
				dataSource={dataList}
			/>
			<Modal
				title="准出详情"
				open={isModalOpen}
				onOk={() => setIsModalOpen(false)}
				onCancel={() => setIsModalOpen(false)}
				footer={null}>
				<Form
					form={form}
					name="basic"
					layout="horizontal"
					labelCol={{flex: '100px'}}
					labelAlign="right"
					labelWrap
					autoComplete="off"
					disabled>
					<Form.Item label="禁用原因" name="disableReason" colon>
						<Input maxLength={200} />
					</Form.Item>
					<Form.Item
						name="disableFileUrl"
						label="附件上传"
						valuePropName="fileList"
						getValueFromEvent={normFile}>
						<Upload />
					</Form.Item>
					<Form.Item label="禁用人" name="logPersonname">
						<Input placeholder="请输入" />
					</Form.Item>
					<Form.Item label="禁用日期" name="logTime">
						<Input placeholder="请输入" />
					</Form.Item>
				</Form>
			</Modal>
		</div>
	)
}

export default settlement
